<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<meta charset="utf-8">
<head th:include="include :: header"></head>
<body class="white-bg">
<div id="formBox" class="wrapper wrapper-content animated fadeInRight ibox-content">
	<div class="form-horizontal m" id="form-user-add">
		<div class="form-group">
			<label class="col-sm-3 control-label ">支付宝账户：</label>
			<div class="col-sm-5" style="background: #e7eaec; padding-top:12px;">
				<div class="form-group">
					<label class="col-sm-3 control-label"></label>
					<div class="col-sm-5">
						<img id="imgZfb" :src="zfbImg" class="col-sm-12 " style="width: 100%;height: 100%;padding: 0 0;">
					</div>
				</div>
				<div class="form-group">
					<label class="col-sm-3 control-label">收款人姓名：</label>
					<div class="col-sm-5">
						<input id="zfbNo" class="form-control" type="text" :value="zfbNo" >
					</div>
				</div>
			</div>
		</div>
		<div class="form-group">
			<label class="col-sm-3 control-label ">微信账户：</label>
			<div class="col-sm-5" style="background: #e7eaec; padding-top:12px;">
				<div class="form-group">
					<label class="col-sm-3 control-label"></label>
					<div class="col-sm-5">
						<img id="imgWx" :src="wxImg" class="col-sm-12 " style="width: 100%;height: 100%;padding: 0 0;">
					</div>
				</div>
				<div class="form-group">
					<label class="col-sm-3 control-label">收款人姓名：</label>
					<div class="col-sm-5">
						<input id="wxNo" class="form-control" type="text" :value="wxNo">
					</div>
				</div>
			</div>
		</div>
		<div class="form-group">
			<label class="col-sm-3 control-label ">银联收款账户：</label>
			<div class="col-sm-5" style="background: #e7eaec; padding-top:12px;">
				<div class="form-group">
					<label class="col-sm-3 control-label">收款人姓名：</label>
					<div class="col-sm-5">
						<input id="yhkName" class="form-control" type="text" :value="yhkName">
					</div>
				</div>
				<div class="form-group">
					<label class="col-sm-3 control-label">银行名称：</label>
					<div class="col-sm-5">
						<input id="yhkBankName" class="form-control" type="text" :value="yhkBankName">
					</div>
				</div>
				<div class="form-group">
					<label class="col-sm-3 control-label">开户行：</label>
					<div class="col-sm-5">
						<input id="yhkBank" class="form-control" type="text" :value="yhkBank">
					</div>
				</div>
				<div class="form-group">
					<label class="col-sm-3 control-label">银行账号 ：</label>
					<div class="col-sm-5">
						<input id="yhkNo" class="form-control" type="text" :value="yhkNo">
					</div>
				</div>
			</div>
		</div>

		<div class="form-group"></div>
		<div class="form-group">
			<label class="col-sm-3 control-label"></label>
			<div class="btn-group-sm hidden-xs" id="toolbar" role="group">
				<a class="btn btn-success col-sm-5" @click="refreshCode">
					<i class="fa fa-plus"></i> 保存
				</a>
			</div>
		</div>
	</div>
</div>
<script th:inline="javascript"> var ctx = [[@{/}]]; var captchaType = [[${captchaType}]]; </script>
<script th:src="@{/js/vue.min.js}"></script>
<script th:src="@{/js/jquery.min.js}"></script>
<script th:src="@{/js/ajaxupload.js}"></script>

<script>
    var payAccout= {};
    var vm = new Vue({
        el: '#formBox',
        data: {
            zfbNo:'[[${thisUser.zfbNo}]]',
            zfbImg: ctx + ('[[${thisUser.zfbImg}]]' ? '[[${thisUser.zfbImg}]]' : 'img/qr_code.png'),
            wxNo:'[[${thisUser.wxNo}]]',
            wxImg: ctx + ('[[${thisUser.wxImg}]]' ? '[[${thisUser.wxImg}]]' : 'img/qr_code.png'),
            yhkName:'[[${thisUser.yhkName}]]',
            yhkNo:'[[${thisUser.yhkNo}]]',
            yhkBank:'[[${thisUser.yhkBank}]]',
            yhkBankName:'[[${thisUser.yhkBankName}]]'
        },
        methods: {
            refreshCode: function () {
                payAccout.zfbNo = $("#zfbNo").val();
                payAccout.wxNo = $("#wxNo").val();
                payAccout.yhkName = $("#yhkName").val();
                payAccout.yhkNo = $("#yhkNo").val();
                payAccout.yhkBank = $("#yhkBank").val();
                payAccout.yhkBankName = $("#yhkBankName").val();
                $.ajax({
                    type: "POST",
                    url: ctx + "accept/money_type_edit",
                    data: payAccout,
                    dataType: "json",
                    success: function (result) {
                        if (result.code == 0) {//登录成功
                            alert('保存成功');
                        } else {
                            alert(result.msg);
                        }
                    }
                });
            }

        }
    });

    $(function () {
        new AjaxUpload('#imgZfb', {
            action: ctx + 'admin/file/upload',
            name: 'file',
            data: {
                logic: 'set_pay_img',
                type: 'pay',
                state: '0',
                puth:'11'
            },
            autoSubmit: true,
            responseType: "json",
            onSubmit: function (file, extension) {
                if (!(extension && /^(jpg|jpeg|png|gif)$/.test(extension.toLowerCase()))) {
                    alert('只支持jpg、png、gif格式的图片！');
                    return false;
                }
            },
            onComplete: function (file, r) {
                if (r.code == 0) {
                    vm.zfbImg = ctx + r.url;
                    payAccout.zfbImg = r.url;
                } else {
                    alert(r.msg);
                }
            }
        });
        new AjaxUpload('#imgWx', {
            action: ctx + 'admin/file/upload',
            name: 'file',
            data: {
                logic: 'set_pay_img',
                type: 'pay',
                state: '0',
                puth:'11'
            },
            autoSubmit: true,
            responseType: "json",
            onSubmit: function (file, extension) {
                if (!(extension && /^(jpg|jpeg|png|gif)$/.test(extension.toLowerCase()))) {
                    alert('只支持jpg、png、gif格式的图片！');
                    return false;
                }
            },
            onComplete: function (file, r) {
                if (r.code == 0) {
                    vm.wxImg = ctx + r.url;
                    payAccout.wxImg = r.url;
                } else {
                    alert(r.msg);
                }
            }
        });
    });
</script>
</body>
</html>
